<template>
  <section class="section">
    <el-row>
      <el-col :span="8">
        <div class="left">
          <header class="header">
            <div class="status">
              <div class="status-text">待机中...</div>
              <img class="img1" src="@/assets/images/座机2.png" alt="" />
              <div class="text">呼叫状态</div>
              <img class="img2" src="@/assets/images/座机1.png" alt="" />
              <img
                class="img3"
                src="@/assets/images/刷新.png"
                alt=""
                @click="getCallRecordList"
              />
            </div>
            <div class="title">通话记录</div>
          </header>
          <main class="main">
            <el-table
              :data="callLogData"
              stripe
              border
              style="width: 100%"
              height="280"
              @cell-click="phoneClick"
            >
              <el-table-column prop="SOTR" label="序号" fixed width="50">
              </el-table-column>
              <el-table-column prop="PHONE_NUMBER" label="电话号码" width="180">
                <template slot-scope="data">
                  <div v-contextmenu:menuPhone :data-index="data.$index">
                    {{ data.row.PHONE_NUMBER }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="CALL_TYPE" label="呼入/呼出" width="100">
                <template slot-scope="{ row }">
                  {{ row.CALL_TYPE == 0 ? "呼入" : "呼出" }}
                </template>
              </el-table-column>
              <el-table-column prop="START_TIME" label="开始通话时间">
              </el-table-column>
              <el-table-column prop="END_TIME" label="结束通话时间">
              </el-table-column>
            </el-table>
            <audio
              controls
              height="100"
              class="audio"
              autoplay="autoplay"
              ref="audio"
            >
              <!-- <source src="" type="audio/mpeg" /> -->
            </audio>
            <v-contextmenu ref="menuPhone" @contextmenu="contextmenu">
              <v-contextmenu-item :disabled="true">回拨</v-contextmenu-item>
              <v-contextmenu-item :disabled="true">加零回拨</v-contextmenu-item>
              <v-contextmenu-item :disabled="true"
                >发送急救常识</v-contextmenu-item
              >
              <v-contextmenu-item @click="harasment"
                >设为骚扰</v-contextmenu-item
              >
              <v-contextmenu-item @click="addRecord"
                >添加记录</v-contextmenu-item
              >
              <v-contextmenu-item @click="setConPhoneNumber"
                >电话关联</v-contextmenu-item
              >
            </v-contextmenu>
          </main>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="right">
          <header class="header">
            <div class="wrapper">
              <div class="marquee">
                <span class="marqueeContent"></span>
              </div>
            </div>
          </header>
          <main class="main">
            <div class="phone">
              <div class="dial">
                <span style="color: white">快捷拨号：</span>
                <el-input
                  v-model="input"
                  placeholder="请输入内容"
                  style="width: 30%"
                  size="mini"
                ></el-input>
                <span class="operate">呼叫</span>
                <span class="operate">三方</span>
              </div>
              <div class="people">
                <div class="people_tree">
                  <el-tree
                    :data="speedTreeData"
                    :props="defaultProps"
                    default-expand-all
                    @node-click="nodeClick"
                    ref="tree"
                  >
                  </el-tree>
                </div>
                <div class="phone_list">
                  <div
                    v-for="item in phoneList"
                    :key="item.TABLE_UUID"
                    class="item_phone"
                  >
                    <img class="img" src="@/assets/images/座机.png" alt="" />
                    <div>{{ item.NAME }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="information">
              <div class="site">
                <div class="site_title">站点信息</div>
                <div class="site_list" @click="getMessage">
                  <div
                    v-for="item in siteList"
                    :key="item.TABLE_UUID"
                    :data-uuid="item.TABLE_UUID"
                    class="item_site"
                  >
                    <img src="../../../assets/images/医院.png" width="25" height="25" style="vertical-align: middle;margin-right: 5px;" alt="">
                    <span> {{ item.ORG_NAME }} </span>
                  </div>
                </div>
              </div>
              <div class="message">
                <div class="message_title">通讯信息</div>
                <div class="message_list">
                  <div
                    class="item_message"
                    v-for="item in messageList"
                    :key="item.TABLE_UUID"
                  >
                    <div class="title">
                      {{ item.MSG_TITLE }}
                    </div>
                    <div class="content">
                      {{ item.MSG_CONTANT }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      </el-col>
    </el-row>
  </section>
</template>
<script>
import {
  getCallRecord,
  getSpeedDialTree,
  getNumberInfoList,
  getSiteList,
  getCommunicationInfoList,
  setHarassment,
  addRecord,
  setConPhoneNumber,
} from "@/api/emergencyDispatch/emergencyDispatch.js";
export default {
  components: {},
  data() {
    return {
      input: "",
      phoneList: [],
      defaultProps: {
        children: "children",
        label: "DICT_NAME",
      },
      speedTreeData: [
        {
          id: 1,
          label: "一级 1",
          children: [
            { id: 2, label: "一级 2" },
            { id: 3, label: "一级 3" },
            { id: 2, label: "一级 2" },
            { id: 3, label: "一级 3" },
            { id: 2, label: "一级 2" },
            { id: 3, label: "一级 3" },
            { id: 2, label: "一级 2" },
            { id: 3, label: "一级 3" },
            { id: 2, label: "一级 2" },
            { id: 3, label: "一级 3" },

            { id: 2, label: "一级 2" },
            { id: 3, label: "一级 3" },
            { id: 2, label: "一级 2" },
            { id: 3, label: "一级 3" },
            { id: 2, label: "一级 2" },
            { id: 3, label: "一级 3" },
            { id: 2, label: "一级 2" },
            { id: 3, label: "一级 3" },
          ],
        },
      ],
      callLogData: [],
      siteList: [],
      messageList: [],
      fn: null,
      phoneMenuIndex: 0,
    };
  },
  computed: {},
  async created() {
    this.getCallRecordList();
    this.getSpeedDialTreeList();
    this.getNumberInfoList();
    this.getSiteList();
  },
  mounted() {},
  beforeDestroy() {
    clearInterval(this.fn);
  },
  methods: {
    getCallRecordList() {
      getCallRecord({
        startTime: "",
        endTime: "",
      }).then((res) => {
        this.callLogData = res.result;
      });
    },
    getSpeedDialTreeList() {
      getSpeedDialTree({
        startTime: "",
        endTime: "",
      }).then((res) => {
        this.speedTreeData = res.result;
      });
    },
    getNumberInfoList(data = {}) {
      getNumberInfoList(data).then((res) => {
        this.phoneList = res.result;
      });
    },
    getSiteList() {
      getSiteList().then((res) => {
        this.siteList = res.result;
        if (this.siteList.length) {
          this.getCommunicationInfoList(this.siteList[0].TABLE_UUID);
        }
      });
    },
    getCommunicationInfoList(orgId) {
      getCommunicationInfoList({ orgId }).then((res) => {
        let str = "";
        this.messageList = res.result;
        clearInterval(this.fn);
        if (!res.result.length) {
          document.querySelector(".marqueeContent").innerHTML = str;
          return;
        }
        this.messageList.forEach((item) => {
          if (item.ROTATE_CONTANT) {
            str += item.ROTATE_CONTANT + " ";
          }
        });
        document.querySelector(".marqueeContent").innerHTML = str;
        this.fn = setInterval(this.move("left"), 20);
      });
    },
    getMessage(e) {
      if (e.target.className == "site_list" || e.target.tagName == 'IMG') {
        return;
      }
      let tagName = e.target?.tagName;
      let orgId = null;
      if (tagName && tagName == "DIV") {
        orgId = e.target.getAttribute("data-uuid");
      } else if (tagName && tagName == "SPAN") {
        orgId = e.target.parentNode.getAttribute("data-uuid");
      }
      this.getCommunicationInfoList(orgId);
    },
    nodeClick(row, node) {
      if (node.level == 1) {
        return;
      }
      this.getNumberInfoList({
        dictId: row.TABLE_UUID,
      });
    },
    phoneClick(row, column) {
      if (column.property !== "PHONE_NUMBER") {
        return;
      }
      this.$refs.audio.src = row.FILE_PATH;
      this.$nextTick(() => {
        const { audio } = this.$refs;
        audio.load();
        audio.play();
      });
    },
    //底下的走马灯
    move(dic) {
      let wrapper, wrapperWidth, marquee, marqueeContent, contentWidth;
      wrapper = document.querySelector(".wrapper");
      marquee = document.querySelector(".marquee");
      marqueeContent = document.querySelector(".marqueeContent");
      contentWidth = marqueeContent.getBoundingClientRect().width;
      wrapperWidth = 0;
      if (dic == "left" || dic == "" || dic == null) {
        wrapperWidth = wrapper.getBoundingClientRect().width;
      }
      marquee.style.transform = "translateX(" + wrapperWidth + "px)";
      let distance = wrapperWidth;
      return function () {
        if (dic == "left" || dic == "" || dic == null) {
          //当文字移动超出wrapper的左侧时 则归位
          if (
            marquee.getBoundingClientRect().x + contentWidth <
            wrapper.getBoundingClientRect().x
          ) {
            distance = wrapperWidth;
          }
          distance--;
          marquee.style.transform = "translateX(" + distance + "px)";
        } else if (dic == "right") {
          //当文字移动超出wrapper的右侧时 则归位
          if (
            marquee.getBoundingClientRect().x - contentWidth >
            wrapper.clientWidth
          ) {
            var len = $("span[id=marqueeContent]").text().length;
            distance = -contentWidth / len;
            console.error(distance);
          }
          distance++;
          marquee.style.transform = "translateX(" + distance + "px)";
        }
      };
    },
    contextmenu(node) {
      this.phoneMenuIndex = node.elm.getAttribute("data-index");
    },
    harasment() {
      let data = this.callLogData[this.phoneMenuIndex];
      setHarassment({ TABLE_UUID: data.TABLE_UUID }).then((res) => {
        this.$message({
          duration: 2000,
          message: "设为骚扰成功",
          type: "success",
        });
      });
    },
    addRecord() {
      let data = this.callLogData[this.phoneMenuIndex];
      addRecord({ TABLE_UUID: data.TABLE_UUID }).then((res) => {
        this.$message({
          duration: 2000,
          message: "添加记录成功",
          type: "success",
        });
      });
    },
    setConPhoneNumber() {
      let data = this.callLogData[this.phoneMenuIndex];
      setConPhoneNumber({
        TABLE_UUID: data.TABLE_UUID,
        CON_PHONE_NUMBER: data.CON_PHONE_NUMBER,
      }).then((res) => {
        this.$message({
          duration: 2000,
          message: "电话关联成功",
          type: "success",
        });
      });
    },
  },
};
</script>
<style scoped lang='scss'>
.section {
  .left {
    .header {
      .status {
        position: relative;
        height: 40px;
        background: #e2fbf8;
        padding: 5px 0;
        .status-text {
          text-align: center;
          border-radius: 30px;
          color: #ce2145;
          font-size: 16px;
          width: 200px;
          height: 30px;
          border: 2px #b2f3e9 solid;
          background: white;
          position: absolute;
          left: 20px;
        }
        .text {
          position: absolute;
          color: #0a850b;
          left: 43%;
          font-size: 14px;
          top: 50%;
          transform: translateY(-50%);
        }
        .img1,
        .img2,
        .img3 {
          position: absolute;
          width: 30px;
          height: 30px;
          top: 50%;
          transform: translateY(-50%);
        }
        .img1 {
          left: 37%;
        }
        .img2 {
          right: 8%;
          &:hover {
            cursor: pointer;
          }
        }
        .img3 {
          right: 2%;
          &:hover {
            cursor: pointer;
          }
        }
      }
      .title {
        height: 40px;
        line-height: 40px;
        background: #00b384;
        color: white;
        font-size: 14px;
        padding-left: 5px;
      }
    }
    .main {
      .audio {
        width: 100%;
        background: #000;
      }
    }
  }
  .right {
    padding-left: 5px;
    .header {
      width: 100%;
      height: 40px;
      background: #e2fbf8;
      padding: 5px 0;
      .wrapper {
        border-radius: 30px;
        color: red;
        font-size: 16px;
        width: 100%;
        height: 30px;
        border: 2px #b2f3e9 solid;
        background: white;
        overflow: hidden;
        .marquee {
          // height: 20px;
          // margin-top: 10px;
        }
        .marqueeContent {
          // color: black;
          // font-size: 20px;
          // font-weight: bold;
        }
      }
    }
    .main {
      display: flex;
      .phone {
        flex: 1;
        .dial {
          padding-left: 5px;
          line-height: 40px;
          height: 40px;
          background: #e86b55;
          .operate {
            display: inline-block;
            height: 25px;
            line-height: 25px;
            color: white;
            background: #8f1e0d;
            margin: 0 10px;
            padding: 0 10px;
            vertical-align: middle;
          }
        }
        .people {
          display: flex;
          %people-item {
            padding: 10px;
            height: 330px;
            overflow: auto;
            background: white;
          }
          .people_tree {
            @extend %people-item;
            flex: 1;
          }
          .phone_list {
            @extend %people-item;
            flex: 2;
            margin-left: 5px;
            overflow-y: auto;
            display: flex;
            flex-flow: wrap;
            align-content: flex-start;
            .item_phone {
              flex-basis: calc(100% / 5);
              height: 80px;
              .img {
                width: 50px;
                height: 50px;
              }
            }
          }
        }
      }
      .information {
        %information-item {
          padding: 10px;
          height: 330px;
          overflow-y: auto;
          background: white;
        }
        flex: 1;
        display: flex;
        margin-left: 10px;
        .site {
          flex: 1;
          .site_title {
            text-align: center;
            height: 40px;
            line-height: 40px;
            background: #000;
            color: white;
          }
          .site_list {
            @extend %information-item;
            .item_site {
              padding: 10px;
              margin: 4px 0;
              span {
                font-weight: bold;
              }
              &:hover {
                cursor: pointer;
              }
            }
          }
        }
        .message {
          flex: 2;
          margin-left: 5px;
          .message_title {
            padding-left: 20px;
            height: 40px;
            line-height: 40px;
            background: #e86b55;
            color: white;
          }
          .message_list {
            @extend %information-item;
            .item_message {
              padding-top: 10px;
              .content {
                padding-left: 5px;
                margin-top: 5px;
                color: red;
              }
            }
          }
        }
      }
    }
  }
}
</style>
